<template>
                               
                               <!-- 手机端padding=24,电脑端为0 -->
                               <!-- validation-schema表单验证 -->
  <form @submit="onSubmit" > 
                                                      <!--在超过md平板的屏幕时候才有栅格-->
      <div class="w-[720px] bg-white translate-y-16 md:translate-y-0   md:grid grid-cols-2   rounded-md shadow-md"> 
        <div class="p-6 ">
            
              <h1 class="text-center text-gray-700 text-lg cursor-pointer mt-3" >会员登录</h1>

            <div class="mt-8">
            
             <FormAdminInput v-model="values.userName"/><br/>
             <FormError :error="errors.userName"/>
             <FormAdminInput v-model="values.password" class="mt-6" /><br/>
              <FormError :error="errors.password"/> <br/>

             <div class="flex justify-between gap-4">
               <!-- 验证码 -->
               <FormAdminInput v-model="values.protect" placeholder="请输入验证码" class="!w-[120px] "/>
             
                <img :src=base64Img @click="protectClick()" class="cursor-pointer rounded-md">
                
             </div>
              <FormError :error="errors.protect" class="!bg-red-600 "/>

             
                  <FormBtns :text="loginName" /> 
                 
              </div>

      
         <div class="flex gap-2 justify-center mt-7">
           <router-link :to="{path:'/'}" class="text-style hover:text-teal-400 duration-300">网站首页</router-link>
           <router-link :to="{name:'auth.register'}" class="text-style  hover:text-purple-400 duration-300" >会员注册</router-link>
           <a href="#" class="text-style hover:text-red-300 duration-300">找回密码</a>
           </div>
        </div>
   
  
           <!-- 小于md是hidden,大于md是显示状态 -->
        <div class="hidden md:block">
          <img src="../../../public/imgs/login2.jpg" class=" w-full h-[410px] object-cover
             cursor-pointer ">
        </div>
      </div>
  </form>
  

  <!--  -->
  <!-- 遮罩 -->
 <div :class="isShow?'mask':'notmask'" v-if="isShow" >
  <!-- 滑块 -->
     <div class="slider" >
      <slide-verify  
    class="silde_box"
      ref="block"
      slider-text="向右滑动"
      @again="onAgain"
      @success="onSuccess(accountInfo)"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  
    <!-- 点击之后，消失滑块 -->
    <icon-error @click="isShow=!isShow" class="absolute top-0 left-0 cursor-pointer "
    theme="two-tone" size="24" :fill="['#b6b5a3' ,'#e2205c']"/>
    <!-- <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button> -->
<div>{{msg}}</div>
     </div>
  </div>
</template>

<script setup lang="ts">

import {ref,onMounted} from "vue";

import v from "@/plugins/validata/index"
import userApi from "@/apis/userApi"

import utils from "@/utils/index"
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";


const base64Img=ref()
//一开始就掉取验证码的api
onMounted(async()=>{
  base64Img.value= await (await userApi.getProtect()).data
  // console.log(base64Img.value);
  //存储起来
  utils.store.set("protect-img",base64Img.value?.base64)
  utils.store.set("UUID-protect",base64Img.value?.uuid)
  base64Img.value= "data:image/jpg;base64,"+base64Img.value?.base64
})

//点击刷新验证码
const protectClick=async()=>{
  base64Img.value= await (await userApi.getProtect()).data
  // console.log(base64Img.value);
  //存储起来
  utils.store.set("protect-img",base64Img.value?.base64)
  utils.store.set("UUID-protect",base64Img.value?.uuid)
  base64Img.value= "data:image/jpg;base64,"+base64Img.value?.base64
    
}


const  {yup,useForm,useFields}=  v
const loginName =ref("登录")

const schema={  //使用yup验证规则
    userName:yup.string().required().email("账号必须为邮箱格式").label("账号"),
    password:yup.string().required().min(10,"密码不能少于10位").label("密码"),
    protect:yup.string().required("验证码不能为空")
}

let {handleSubmit,errors,values} = useForm({
    validationSchema:schema,
    initialValues:{
      userName:"1362941253@qq.com" ,
       password:"15862947755"
    },

})

//定义为响应式数据
//  useField<string>("account")
//  useField<string>("password")
useFields(Object.keys(schema))
//提交

//来存登录的账号和密码
const accountInfo=ref()
const onSubmit=handleSubmit(async(value:any)=>{

  loginName.value="登录中..."
  
  accountInfo.value=value
  // block.value?.refresh();
  console.log(value);
 
  
  onSubmit1()

})

// //滑块 ********************************


const isShow=ref(false)

const msg=ref("")

const block=ref<SlideVerifyInstance>()

 const  onSuccess=async(accountInfo:any)=>{
                // msg.value = '登录成功! '+"密码为:"+input
                 utils.user.login(accountInfo?.userName,accountInfo?.password,
                 values.protect,utils.store.get("UUID-protect")).then(()=>{
                  isShow.value=false
                  loginName.value="登录"
                 })
                     
              
            }
  const  onFail=()=>{
               msg.value = '登录失败'
            }
  const  onRefresh=()=>{
                msg.value = ''
            }
 const  onAgain=()=> {
                console.log('检测到非人为操作的哦！');
                msg.value = 'try again';
                // 刷新
                block.value?.refresh();
            }

   const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };   
        const onSubmit1=()=>{
        
          isShow.value=true 
                  
        }  


</script>


<style scoped lang="scss">
  
  form{
    @apply  bg-slate-300 h-screen flex justify-center items-center p-6 md:p-0 
  }
 
   .text-style{
  @apply  text-xs text-gray-700
   }

   .mask{
       position: fixed;
       left: 0%;
       top: 0%;
       width: 100%;
       height: 100%;
       z-index:100;
       overflow: hidden;
       background-color:rgba(0, 0, 0, 0.4)
   }
   .notmask{

   }
   .slider{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: white;
   }

</style>

